<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>列表过滤</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        
    </head>
    <body>
        <div id="root">
            <h2>遍历数组, key使用业务数据唯一标识</h2>
            <input type="text" placeholder="请输入关键字" v-model="pNameKey">
            <ul>
                <li v-for="p in personsCopy" :key="p.id">
                    {{p.name}} - {{p.age}} -- {{p.gender}}
                </li>
            </ul>

        </div>
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                pNameKey:"",
                persons:[
                    {id:1, name: '马冬梅', age: 18,gender:"女"},
                    {id:2, name: '周冬雨', age: 19,gender:"女"},
                    {id:3, name: '周杰伦', age: 20,gender:"男"},
                    {id:4, name: '温兆伦', age: 21,gender:"男"},
                ]
                // personsCopy: []
            }, // 监视pNameKey的变化, 一旦变化, 就重新过滤persons
            // watch:{  
            //     pNameKey:{
            //         immediate:true,
            //         handler(val){
            //             this.personsCopy = this.persons.filter(p => p.name.indexOf(val) !== -1)
            //         }
            //     }
            // },
            // 计算属性实现列表过滤
            computed:{
                personsCopy(){
                    return this.persons.filter(p => p.name.indexOf(this.pNameKey) !== -1)
                }
            },
        })
    </script>
</html> 